<template>
  <div class="button">
    <h2>type属性</h2>
    <div class="demo">
      <mala-button type="primary">primary</mala-button>
      <mala-button type="success">success</mala-button>
      <mala-button type="info">info</mala-button>
      <mala-button type="warning">warning</mala-button>
      <mala-button type="danger">danger</mala-button>
    </div>

    <h2>round属性</h2>
    <div class="demo">
      <mala-button type="primary" round>primary</mala-button>
      <mala-button type="success" round>success</mala-button>
      <mala-button type="info" round>info</mala-button>
      <mala-button type="warning" round>warning</mala-button>
      <mala-button type="danger" round>danger</mala-button>
    </div>

    <h2>size属性</h2>
    <div class="demo">
      <mala-button>default</mala-button>
      <mala-button size="small">small</mala-button>
      <mala-button size="large">large</mala-button>
    </div>

    <h2>disabled属性</h2>
    <div class="demo">
      <mala-button disabled type="primary">primary</mala-button>
      <mala-button disabled type="success">success</mala-button>
      <mala-button disabled type="info">info</mala-button>
      <mala-button disabled type="warning">warning</mala-button>
      <mala-button disabled type="danger">danger</mala-button>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
.demo {
  width: 500px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>